<template>
  <div class="img">
    <a-upload
      action="https://jic.jnby.com/activity/market-act/common/upload/multipart"
      list-type="picture-card"
      :file-list="fileList"
      :multiple="isMultiple"
      :beforeUpload="beforeUpload"
      @preview="handlePreview"
      @change="handleChange"
    >
      <div v-if="showUp">
        <a-icon type="plus" />
        <div class="ant-upload-text">
          上传
        </div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>

export default {
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      uploadLoading: false,
      picUrl: false,
      fileList: [],
      previewImage: '',
      previewVisible: false
    }
  },
  props: {
    text: {
      type: String,
      required: false,
      default: '上传'
    },
    /*这个属性用于控制文件上传的业务路径*/
    bizPath: {
      type: String,
      required: false,
      default: 'temp'
    },
    value: {
      type: [String, Array],
      required: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    isMultiple: {
      type: Boolean,
      required: false,
      default: false
    },
    number: {
      type: Number,
      required: false,
      default: 1
    }
  },
  computed: {
    showUp() {
      return this.isMultiple ? this.fileList.length < this.number : this.fileList.length < 1
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function(newValue, oldValue) {
        if (newValue) {
          if (newValue instanceof Array) {
            this.fileList = newValue.map(url => {
              return {
                name: url,
                uid: url,
                status: 'done',
                url: url
              }
            })
          } else {
            this.fileList = [
              {
                name: newValue,
                uid: newValue,
                status: 'done',
                url: newValue
              }
            ]
          }
        }else{
          this.fileList = []
        }
      }
    }
  },
  methods: {
    beforeUpload: function(file) {
      console.log('beforeUpload', file)
      var fileType = file.type
      if (fileType.indexOf('image') < 0) {
        this.$message.warning('请上传图片')
        return false
      }
      if (this.isMultiple && this.number < this.fileList) {
        this.$message.warning(`只能上传${this.number}张图片`)
        return false
      }
    },
    handleChange(info) {
      let fileList = []
      if (this.isMultiple) {
        fileList = [...info.fileList]
      } else {
        fileList = info.fileList
      }
      if (fileList.length > this.number && this.isMultiple) {
        this.$message.warning('最多上传' + this.number + '张！')
        return false
      }
      if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`)
      } else {
        let list = fileList.map(file => {
          if (file.response) {
            file.url = file.response.data
          }
          return file
        })
        this.fileList = list
        const urls = list.map(item => item.url)
        if (info.file.status !== 'uploading') {
          this.$emit('change', urls.length == 1 ? urls[0] : urls.length == 0 ? undefined : urls)
        }
      }
    },
    handleDelete(file) {
      //如有需要新增 删除逻辑
      console.log(file)
    },
    // 预览
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleCancel() {
      this.previewVisible = false
    },
    handlePathChange() {
      let uploadFiles = this.fileList
      let path = ''
      if (!uploadFiles || uploadFiles.length == 0) {
        path = ''
      }
      let arr = []
      if (!this.isMultiple && uploadFiles.length > 0) {
        arr.push(uploadFiles[uploadFiles.length - 1].response.message)
      } else {
        for (let a = 0; a < uploadFiles.length; a++) {
          // update-begin-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
          if (uploadFiles[a].status === 'done') {
            arr.push(uploadFiles[a].response.message)
          } else {
            return
          }
          // update-end-author:taoyan date:20200819 for:【开源问题z】上传图片组件 LOWCOD-783
        }
      }
      if (arr.length > 0) {
        path = arr.join(',')
      }
      this.$emit('change', this.fileList)
    }
  }
}
</script>
